Form Validation in a Vue 3 App with Vee-Validate 4 — Validating Custom Inputs

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Validating Custom Inputs

We can use Vee-Validate 4 to validate custom input components.

For example, we can write:

components/TextInput.vue

<template>
  <div
    class="TextInput"
    :class="{ 'has-error': !!errorMessage, success: meta.valid }"
  >
    <label :for="name">{{ label }}</label>
    <input
      :name="name"
      :id="name"
      :type="type"
      :value="inputValue"
      @input="handleChange"
      @blur="handleBlur"
    />

    <p class="help-message" v-show="errorMessage || meta.valid">
      {{ errorMessage || successMessage }}
    </p>
  </div>
</template>

<script>
import { useField } from "vee-validate";

export default {
  props: {
    type: {
      type: String,
      default: "text",
    },
    value: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    successMessage: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const {
      value: inputValue,
      errorMessage,
      handleBlur,
      handleChange,
      meta,
    } = useField(props.name, undefined, {
      initialValue: props.value,
    });

    return {
      handleChange,
      handleBlur,
      errorMessage,
      inputValue,
      meta,
    };
  },
};
</script>

App.vue

<template>
  <Form :validation-schema="schema" @submit="onSubmit">
    <TextInput
      name="name"
      type="text"
      label="Full Name"
      placeholder="Your Name"
      success-message="Nice to meet you!"
    />
  </Form>
</template>

<script>
import { Form } from "vee-validate";
import TextInput from "@/components/TextInput.vue";
import * as yup from 'yup'

export default {
  components: {
    Form,
    TextInput,
  },
  data() {
    const schema = yup.object().shape({
      name: yup.string().required(),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We create the TextInput component that takes some props.

name is the name attribute value of our component.

type has the type attribute value.

label has the text for the label.

placeholder has the input placeholder value.

success-message has the validation success message.

We then defined the schema in the data method and passed that into the validation-schema prop.

In TextInput.vue , we get the props and put them in the place we want.

In the setup method, we call the useField function to add validation for our field.

We pass in the name attribute value as the first argument.

And then we set the initial value with the props.value value in the 3rd argument.

It returns an object with the value property which we can use to set the value prop.

handleChange is passed into the input prop to set the inputted value.

handleBlur is used to handle the blur event.

meta has is an object with the validity state of the field.

errorMessage has the form field error message.

Now when we type in some value into the field, we should see different messages depending on if the value is valid or not.

Conclusion

We can use Vee-Validate 4 to validate Vue 3 custom input components.